/*
 * Copyright (C) 2015 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

// section tabs variables
$section_tabs_color: $ic-font-color-dark;
$section_tabs_hover_background_color: $ic-bg-light-neutral;
$section_tabs_border_top_color: $ic-border-color;
$section_tabs_border_bottom_color: $ic-border-color;
$section_tabs_to_be_hidden_color: $ic-font-color--subdued;

// #TODO - looks like a lot of these styles are being overridden by the _same_ styles that were
// possibly left in the <style> tag of this area in canvas. So a lot of these are being overridden.
// Need to investigate and consolidate these to get the styles out of the head tag.

#course_form .date_entry {
  width: 165px;
}

#course-status {
  font-size: 0.875rem !important;
  font-weight: normal;
}

.users-wrapper {
  border: 1px solid #CCC;
  margin-bottom: 1.4em;
  h3, .h3 {
    @include fontSize(18px);
    margin: 0;
    padding: 8px;
    background-color: #F7F7F7;
    border-bottom: 1px solid #CCC;
    line-height: 1em;
  }
  .pagination-loading {
    padding: 8px;
    display: block;
    text-align: center;
    text-decoration: none;
    background-color: #06A9EE;
    color: white;
  }
}

ul.user_list {
  list-style: none;
  padding: 0px;
  margin: 0;
  max-height: 300px;
  min-height: 50px;
  overflow: auto;
  li.none {
    padding: 8px;
  }
}

ul.user_list li.user {
  min-height: 30px;
  padding-left: 10px;
  color: #444;
  line-height: 1em;
  padding: 8px;
  margin: 0;
  border-bottom: 1px solid #CCC;
  &:last-child {
    border-bottom: 0;
  }
  > span.pending {
    width: 0;
    height: 0;
    padding: 0;
    margin: (-8px) 0 0 -8px;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #06A9EE;
    display: block;
    position: relative;
  }
}

ul.user_list li.user:hover {
  background-color: $ic-bg-light-primary;
}

ul.user_list li.user .email {
  font-size: 0.8em;
  margin-left: 10px;
}

ul.user_list li.user .associated_user {
  display: none;
  font-size: 0.8em;
  margin-left: 10px;
}

ul.user_list li.user.observer_enrollment .associated_user {
  display: block;
}

ul.user_list li.user .section {
  font-size: 0.8em;
  margin-left: 10px;
}

ul.user_list li.user .short_name {
  font-size: 0.8em;
  margin-left: 10px;
  margin-top: 2px;
}

ul.user_list li.user .associated_user_name:hover {
  text-decoration: underline;
}

ul.user_list li.user .enrollment_type {
  font-size: 0.8em;
  margin: (-2px) 10px 0px;
}

ul.user_list li.user .links {
  float: right;
  padding-right: 20px;
  padding-top: 5px;
  visibility: hidden;
}

ul.user_list li.user .links a {
  text-decoration: none;
}

ul.user_list li.user:hover .links {
  float: right;
  padding-right: 20px;
  visibility: visible;
}

ul.user_list div.enrollment_type.pending {
  color: #888;
  font-style: italic;
}

.add-course-users {
  border: 1px solid #CCC;
  margin-bottom: 1.4em;
  .header {
    padding: 8px;
    border-bottom: 1px solid #CCC;
    background-color: #F7F7F7;
    .id-holder {
      float: left;
      padding-right: 1em;
    }
  }
  #user_list_boxes {
    overflow: hidden;
    margin: 8px;
    #user_list_textarea_container {
      height: auto;
    }
    #user_list_parsed {
      height: auto;
      width: 98%;
    }
  }
}

#sections {
  @include reset-list;
  max-width: 500px;
  list-style-type: none;
}

#sections .section {
  padding: 3px 2px;
}

#sections .section .section_links {
  float: right;
}

#sections .section .users_count {
  padding-left: 5px;
}

#edit_section_form {
  float: left;
}

.nav_list {
  @include reset-list;
  border-top: 1px solid $section_tabs_border_top_color;
  width: 400px;
  margin: 20px 0;
  li.enabled {
    &:hover {
      span {
        display: block;
      }
    }
  }
  li.navitem {
    color: $section_tabs_color;
    cursor: pointer;
    display: block;
    @include fontSize($ic-font-size--small);
    padding: 4px 0 4px 25px;
    border: solid $section_tabs_border_bottom_color;
    border-width: 0 1px 1px;
    &:hover, &:focus {
      background-color: $section_tabs_hover_background_color;
      z-index: 0;
      position: static;
      text-decoration: none;
      .disabled_message {
        display: none;
      }
    }
    .disabled_message {
      display: none;
    }
  }
}

#nav_disabled_list {
  border-top: 0;
  li.disabled {
    padding: 4px 0 4px 0px;
    border-bottom: 1px solid $section_tabs_border_top_color;
  }
  li.navitem {
    color: $section_tabs_to_be_hidden_color;
    .disabled_message {
      display: block;
      font-size: 0.8em;
      padding-left: 10px;
      line-height: 0.7em;
      font-style: italic;
    }
  }
}

.token_input {
  width: 100%;
}

#user_sections {
  list-style: none;
  margin: 0;
  padding: 0;
  li {
    @include name_bubbles;
    clear: left;
  }
}

#edit_sections {
  a.browser {
    background: transparent url(/images/messages/context-search-sprite.png) 0 0 no-repeat;
  }
}

#right-side table.summary {
  margin-top: 20px;
  caption h3 {
    line-height: inherit;
    margin: 0;
    @include fontSize(13px);
    font-weight: bold;
  }
}

.course-settings-sub-navigation-lti .new_badge {
  background-color: #BC3AA6;
  color: white;
  @include fontSize(10px);
  font-weight: normal;
  text-transform: uppercase;
  top: 1px;
}

// new icons need a bit more space when used with
// a link in the right-side-bar
.Button--course-settings {
  i[class*=icon-], i[class^=icon-] {
    margin-right: .5rem;
  }
}

#course_form table.coursesettings {
  input[type=checkbox] + label {
    vertical-align: baseline;
  }
  input, select, td {
    vertical-align: baseline;
  }
  td {
    padding-right: 10px;
  }
  .tall-row {
    padding-top: 3px;
  }
  .aside {
    font-size: 0.9em;
  }
  .checklabelfix {
    vertical-align: -4px;
  }
  .license_help_link img, #course_locale, #course_default_wiki_editing_roles {
    vertical-align: baseline;
  }
  #course_locale {
    width: 360px;
  }
  .palign {
    line-height: 100%;
    margin-bottom: 10px;
  }
  select#course_locale + span {
    white-space: nowrap;
  }
  i.date-warning {
    padding: 8px 0 0 8px;
    color: $btnWarningBackground;
  }
}

input.move-nav-item-label-spacer {
  margin-right: 10px;
}

.move-nav-item-or {
  display: inline-block;
  width: 60px;
  margin-left: 20px;
}

.move-nav-item-select-spacer {
  margin-top: 10px;
}

.drag_and_drop_warning {
  @include accessibility-prompt($is-link: false);
}

a.long {
  min-width: 20px;
}

.not-locked {
  min-width: 16px;
  content: 'p';
}

td.e-tool-table-data {
  line-height: 33px;
}

td.center-text {
  text-align: center;
}

.panel-border {
  border-radius: 10px;
  border: 1px solid #ccc;
  padding: 15px;
  width: 300px;
}

.master_course_restrictions {
  display: none;
  margin-top: 5px;
  margin-left: 18px;
}

.master_course_restrictions .ic-Checkbox-group {
  margin-left: 18px;
}
